<template>
    <n-drawer :show="active" :width="width" :mask-closable="false" @update:show="(flag:boolean) => (active = flag)">
        <n-drawer-content :native-scrollbar="false" title="门店配置" closable>
            <n-form v-if="init" :model="model" ref="formRef" label-placement="left" label-width="auto">
                <n-space vertical :size="24">
                    <n-card size="small" title="运营配置">
                        <n-form-item :span="10" label="营业时间">
                            <n-space justify="center">
                                <n-input size="small" v-model:value="model.operate.opb" maxlength="5" />
                                <span>至</span>
                                <n-input size="small" v-model:value="model.operate.opc" maxlength="5" />
                            </n-space>
                        </n-form-item>
                    </n-card>
                    <n-card size="small" title="结算配置">
                        <n-form-item :span="10" label="结算时间">
                            <n-space justify="center">
                                <n-select
                                    size="small"
                                    :style="{ width: '120px' }"
                                    :options="[
                                        { label: '交车后', value: 1 },
                                        { label: '还车后', value: 2 },
                                    ]"
                                    v-model:value="model.settle.timing"
                                />
                                <DecimalInput v-model:base="model.settle.delay" :min="0" suffix="天" />
                                <span>内结算，0表示实时</span>
                            </n-space>
                        </n-form-item>
                        <n-form-item label="直接出租车辆">
                            <n-space :align="'baseline'" size="small">
                                抽取订单租金的
                                <DecimalInput :precision="1" suffix="%" :max="100" :min="0" v-model:base="model.settle.direct.rate" />
                                ，最低抽取
                                <DecimalInput :precision="2" suffix="元" :min="0" v-model:base="model.settle.direct.must" />
                            </n-space>
                        </n-form-item>
                        <n-form-item label="平台出租车辆">
                            <n-space :align="'baseline'" size="small">
                                抽取订单租金的
                                <DecimalInput :precision="1" suffix="%" :max="100" :min="0" v-model:base="model.settle.plat.rate" />
                                ，最低抽取
                                <DecimalInput :precision="2" suffix="元" :min="0" v-model:base="model.settle.plat.must" />
                            </n-space>
                        </n-form-item>
                    </n-card>
                    <n-card size="small" title="增值服务收费标准">
                        <n-form-item label="送车上门">
                            <n-space :align="'baseline'" size="small">
                                <n-switch :loading="loading" size="small" v-model:value="model.service.onsite.flag">
                                    <template #checked>启用</template>
                                    <template #unchecked>停用</template>
                                </n-switch>
                                <DecimalInput :precision="3" suffix="km" :min="0" v-model:base="model.service.onsite.meter" />
                                内
                                <DecimalInput
                                    :precision="2"
                                    suffix="元"
                                    :min="toMoney(conf.service.onsite.cost - conf.service.onsite.range)"
                                    :max="toMoney(conf.service.onsite.cost + conf.service.onsite.range)"
                                    v-model:base="model.service.onsite.cost"
                                />
                                ，超出后每公里
                                <DecimalInput :precision="2" suffix="元" :min="toMoney(conf.service.onsite.min)" :max="toMoney(conf.service.onsite.max)" v-model:base="model.service.onsite.mile" />
                                ； 平台抽取服务费的
                                <DecimalInput :precision="1" suffix="%" :max="100" :min="0" v-model:base="model.service.onsite.rate" />
                                ，最低抽取
                                <DecimalInput :precision="2" suffix="元" :min="0" v-model:base="model.service.onsite.must" />
                            </n-space>
                        </n-form-item>
                        <n-form-item label="异地还车">
                            <n-space :align="'baseline'" size="small">
                                <n-switch :loading="loading" size="small" v-model:value="model.service.remote.flag">
                                    <template #checked>启用</template>
                                    <template #unchecked>停用</template>
                                </n-switch>
                                <DecimalInput :precision="3" suffix="km" :min="0" v-model:base="model.service.remote.meter" />
                                内
                                <DecimalInput
                                    :precision="2"
                                    suffix="元"
                                    :min="toMoney(conf.service.remote.cost - conf.service.remote.range)"
                                    :max="toMoney(conf.service.remote.cost + conf.service.remote.range)"
                                    v-model:base="model.service.remote.cost"
                                />
                                ，超出后每公里
                                <DecimalInput :precision="2" suffix="元" :min="toMoney(conf.service.remote.min)" :max="toMoney(conf.service.remote.max)" v-model:base="model.service.remote.mile" />
                                ； 平台抽取服务费的
                                <DecimalInput :precision="1" suffix="%" :max="100" :min="0" v-model:base="model.service.remote.rate" />
                                ，最低抽取
                                <DecimalInput :precision="2" suffix="元" :min="0" v-model:base="model.service.remote.must" />
                            </n-space>
                        </n-form-item>
                        <n-form-item label="基础保险">
                            <n-space :align="'baseline'" size="small">
                                <n-switch :loading="loading" size="small" v-model:value="model.service.bins.flag">
                                    <template #checked>启用</template>
                                    <template #unchecked>停用</template>
                                </n-switch>
                                每天收取
                                <DecimalInput
                                    :precision="2"
                                    suffix="元"
                                    :min="toMoney(conf.service.bins.cost - conf.service.bins.range)"
                                    :max="toMoney(conf.service.bins.cost + conf.service.bins.range)"
                                    v-model:base="model.service.bins.cost"
                                />
                                ，每订单最多收取
                                <DecimalInput :precision="2" suffix="元" :min="0" v-model:base="model.service.bins.max" />
                                ； 平台抽取服务费的
                                <DecimalInput :precision="1" suffix="%" :max="100" :min="0" v-model:base="model.service.bins.rate" />
                                ，最低抽取
                                <DecimalInput :precision="2" suffix="元" :min="0" v-model:base="model.service.bins.must" />
                            </n-space>
                        </n-form-item>
                        <n-form-item label="车损保险">
                            <n-space :align="'baseline'" size="small">
                                <n-switch :loading="loading" size="small" v-model:value="model.service.dins.flag">
                                    <template #checked>启用</template>
                                    <template #unchecked>停用</template>
                                </n-switch>
                                <!-- 日租金的
                                <DecimalInput
                                    :precision="1"
                                    suffix="%"
                                    :min="toPercent(conf.service.dins.per - conf.service.dins.range)"
                                    :max="toPercent(conf.service.dins.per + conf.service.dins.range)"
                                    v-model:base="model.service.dins.per"
                                />
                                ，每订单最多收取日租金的
                                <DecimalInput suffix="倍" :min="0" v-model:base="model.service.dins.max" />
                                ； 平台抽取服务费的
                                <DecimalInput :precision="1" suffix="%" :max="100" :min="0" v-model:base="model.service.dins.rate" />
                                ，最低抽取
                                <DecimalInput :precision="2" suffix="元" :min="0" v-model:base="model.service.dins.must" /> -->
                                每天收取
                                <DecimalInput
                                    :precision="2"
                                    suffix="元"
                                    :min="toMoney(conf.service.dins.cost - conf.service.dins.range)"
                                    :max="toMoney(conf.service.dins.cost + conf.service.dins.range)"
                                    v-model:base="model.service.dins.cost"
                                />
                                ，每订单最多收取
                                <DecimalInput :precision="2" suffix="元" :min="0" v-model:base="model.service.dins.max" />
                                ； 平台抽取服务费的
                                <DecimalInput :precision="1" suffix="%" :max="100" :min="0" v-model:base="model.service.dins.rate" />
                                ，最低抽取
                                <DecimalInput :precision="2" suffix="元" :min="0" v-model:base="model.service.dins.must" />
                            </n-space>
                        </n-form-item>
                        <n-form-item label="三者保险">
                            <n-space :align="'baseline'" size="small">
                                <n-switch :loading="loading" size="small" v-model:value="model.service.tins.flag">
                                    <template #checked>启用</template>
                                    <template #unchecked>停用</template>
                                </n-switch>
                                <DecimalInput suffix="万元" :min="0" v-model:base="model.service.tins.quota" />
                                三者保额，
                                <DecimalInput
                                    :precision="2"
                                    suffix="元"
                                    :min="toMoney(conf.service.tins.cost - conf.service.tins.range)"
                                    :max="toMoney(conf.service.tins.cost + conf.service.tins.range)"
                                    v-model:base="model.service.tins.cost"
                                />
                                /十五天 ； 平台抽取服务费的
                                <DecimalInput :precision="1" suffix="%" :max="100" :min="0" v-model:base="model.service.tins.rate" />
                                ，最低抽取
                                <DecimalInput :precision="2" suffix="元" :min="0" v-model:base="model.service.tins.must" />
                            </n-space>
                        </n-form-item>
                        <n-form-item label="车损免赔">
                            <n-space :align="'baseline'" size="small">
                                <n-switch :loading="loading" size="small" v-model:value="model.service.free.flag">
                                    <template #checked>启用</template>
                                    <template #unchecked>停用</template>
                                </n-switch>
                                <DecimalInput :precision="2" suffix="元" :min="0" v-model:base="model.service.free.quota" />
                                以内，
                                <DecimalInput
                                    :precision="2"
                                    suffix="元"
                                    :min="toMoney(conf.service.free.cost - conf.service.free.range)"
                                    :max="toMoney(conf.service.free.cost + conf.service.free.range)"
                                    v-model:base="model.service.free.cost"
                                />
                                /七天 ； 平台抽取服务费的
                                <DecimalInput :precision="1" suffix="%" :max="100" :min="0" v-model:base="model.service.free.rate" />
                                ，最低抽取
                                <DecimalInput :precision="2" suffix="元" :min="0" v-model:base="model.service.free.must" />
                            </n-space>
                        </n-form-item>
                        <n-form-item label="夜间服务">
                            <n-space :align="'baseline'" size="small">
                                <n-switch :loading="loading" size="small" v-model:value="model.service.night.flag">
                                    <template #checked>启用</template>
                                    <template #unchecked>停用</template>
                                </n-switch>
                                当日22点~次日7点，每次收费
                                <DecimalInput
                                    :precision="2"
                                    suffix="元"
                                    :min="toMoney(conf.service.night.cost - conf.service.night.range)"
                                    :max="toMoney(conf.service.night.cost + conf.service.night.range)"
                                    v-model:base="model.service.night.cost"
                                />
                                ； 平台抽取服务费的
                                <DecimalInput :precision="1" suffix="%" :max="100" :min="0" v-model:base="model.service.night.rate" />
                                ，最低抽取
                                <DecimalInput :precision="2" suffix="元" :min="0" v-model:base="model.service.night.must" />
                            </n-space>
                        </n-form-item>
                        <n-form-item label="免押服务">
                            <n-space :align="'baseline'" size="small">
                                <n-switch :loading="loading" size="small" v-model:value="model.service.waive.flag">
                                    <template #checked>启用</template>
                                    <template #unchecked>停用</template>
                                </n-switch>
                            </n-space>
                        </n-form-item>
                    </n-card>
                    <n-card size="small" title="合同相关数据">
                        <n-form-item label="代办扣分" label-width="auto">
                            <n-space :align="'baseline'" size="small">
                                每分收费
                                <DecimalInput
                                    :precision="2"
                                    suffix="元"
                                    :min="toMoney(conf.contract.point.cost - conf.contract.point.range)"
                                    :max="toMoney(conf.contract.point.cost + conf.contract.point.range)"
                                    v-model:base="model.contract.point.cost"
                                />
                            </n-space>
                        </n-form-item>
                        <n-form-item label="罚款代缴" label-width="auto">
                            <n-space :align="'baseline'" size="small">
                                每次收费
                                <DecimalInput
                                    :precision="2"
                                    suffix="元"
                                    :min="toMoney(conf.contract.fine.cost - conf.contract.fine.range)"
                                    :max="toMoney(conf.contract.fine.cost + conf.contract.fine.range)"
                                    v-model:base="model.contract.fine.cost"
                                />
                                ，单个订单内所有违章收费一次
                            </n-space>
                        </n-form-item>
                        <n-form-item label="发票税费" label-width="auto">
                            <n-space :align="'baseline'" size="small">
                                开票金额的
                                <DecimalInput :precision="1" suffix="%" :min="toPercent(conf.contract.invoice.min)" :max="toPercent(conf.contract.invoice.max)" v-model:base="model.contract.invoice.per" />
                            </n-space>
                        </n-form-item>
                        <n-form-item label="维修费标准" label-width="auto">
                            <n-space :align="'baseline'" size="small">
                                以
                                <n-select
                                    :style="largeStyle"
                                    v-model:value="model.contract.unkeep.info"
                                    size="small"
                                    :bordered="false"
                                    placeholder="请选择"
                                    :options="[
                                        { label: '就近4S店', value: '就近4S店' },
                                        { label: '保险公司', value: '保险公司' },
                                    ]"
                                ></n-select>
                                报价为准
                            </n-space>
                        </n-form-item>
                        <n-form-item label="车辆停运费" label-width="auto">
                            <n-space :align="'baseline'" size="small">
                                基础价格的
                                <DecimalInput
                                    :precision="1"
                                    suffix="%"
                                    :min="toPercent(conf.contract.down.per - conf.contract.down.range)"
                                    :max="toPercent(conf.contract.down.per + conf.contract.down.range)"
                                    v-model:base="model.contract.down.per"
                                />
                            </n-space>
                        </n-form-item>
                        <n-form-item label="事故折损费" label-width="auto">
                            <n-space :align="'baseline'" size="small">
                                维修费用的
                                <DecimalInput
                                    :precision="1"
                                    suffix="%"
                                    :min="toPercent(conf.contract.wreck.per - conf.contract.wreck.range)"
                                    :max="toPercent(conf.contract.wreck.per + conf.contract.wreck.range)"
                                    v-model:base="model.contract.wreck.per"
                                />
                            </n-space>
                        </n-form-item>
                        <n-form-item label="超时还车计费" label-width="auto">
                            <n-space :align="'baseline'" size="small">
                                超时
                                <DecimalInput suffix="小时" :min="0" :max="23" v-model:base="model.contract.timeout.half" />
                                收取半日租金，超时
                                <DecimalInput suffix="小时" :min="0" :max="23" v-model:base="model.contract.timeout.day" />
                                收取一日租金
                            </n-space>
                        </n-form-item>
                        <n-form-item label="欠费违约金" label-width="auto">
                            <n-space :align="'baseline'" size="small">
                                每天收取所欠金额的
                                <DecimalInput
                                    :precision="1"
                                    suffix="%"
                                    :min="toPercent(conf.contract.late.per - conf.contract.late.range)"
                                    :max="toPercent(conf.contract.late.per + conf.contract.late.range)"
                                    v-model:base="model.contract.late.per"
                                />
                            </n-space>
                        </n-form-item>
                        <n-form-item label="欠费收车天数" label-width="auto">
                            <n-space :align="'baseline'" size="small">
                                <DecimalInput suffix="天" :min="conf.contract.force.day - conf.contract.force.range" :max="conf.contract.force.day + conf.contract.force.range" v-model:base="model.contract.force.day" />
                            </n-space>
                        </n-form-item>
                        <n-form-item label="燃料价格" label-width="auto">
                            <n-space :align="'baseline'" size="small">
                                每升
                                <DecimalInput :precision="2" suffix="元" :min="0" v-model:base="model.contract.fuel.cost" />
                                ，0表示实时油价
                            </n-space>
                        </n-form-item>
                        <n-form-item label="违章押金解冻" label-width="auto">
                            <n-space :align="'baseline'" size="small">
                                <DecimalInput suffix="天" :min="conf.contract.unfreeze.min" :max="conf.contract.unfreeze.max" v-model:base="model.contract.unfreeze.day" />
                            </n-space>
                        </n-form-item>
                        <n-form-item label="违章处理时效" label-width="auto">
                            <n-space :align="'baseline'" size="small">
                                <DecimalInput suffix="天" :min="conf.contract.violation.min" :max="conf.contract.violation.max" v-model:base="model.contract.violation.day" />
                            </n-space>
                        </n-form-item>
                        <n-form-item label="违约诉讼时效" label-width="auto">
                            <n-space :align="'baseline'" size="small">
                                <DecimalInput suffix="天" :min="0" v-model:base="model.contract.lawsuit.day" />
                            </n-space>
                        </n-form-item>
                        <n-form-item label="诉讼法院" label-width="auto">
                            <n-space :align="'baseline'" size="small">
                                <n-input :style="largeStyle" v-model:value="model.contract.court.info" size="small" :bordered="false" placeholder="请填写" />
                            </n-space>
                        </n-form-item>
                    </n-card>
                </n-space>
            </n-form>
            <template #footer>
                <n-space justify="end">
                    <n-button type="tertiary" :disabled="loading" @click="() => (active = false)">
                        <template #icon>
                            <n-icon :component="CloseRound" />
                        </template>
                        关闭
                    </n-button>
                    <n-button :disabled="loading" @click="execReset">
                        <template #icon>
                            <n-icon :component="RestoreRound" />
                        </template>
                        重置
                    </n-button>
                    <n-button type="primary" :loading="loading" @click="execSave">
                        <template #icon>
                            <n-icon :component="CheckRound" />
                        </template>
                        提交保存
                    </n-button>
                </n-space>
            </template>
        </n-drawer-content>
    </n-drawer>
</template>

<script lang="ts" setup>
import { computed, ref, onBeforeMount } from 'vue'
import { CloseRound, CheckRound, RestoreRound } from '@vicons/material'

import { Http } from '@/libs'
import { useStore } from '@/store'

import DecimalInput from '@/comp/func/DecimalInput.vue'

const largeStyle = { width: '180px', textAlign: 'center', borderBottom: '1px solid gray' }

const store = useStore()
const width = computed(() => Math.max(store.state.browser.innerWidth * 0.4, 1200))

const { $notification: notification } = window

const loading = computed(() => store.state.loading.flag)

const init = ref(false)

const prop = defineProps({
    show: {
        type: Boolean,
        required: true,
    },
    item: {
        type: Object,
        default: {},
    },
})

const emit = defineEmits(['update:show', 'refresh'])

const active = computed({
    get: () => prop.show,
    set: val => emit('update:show', val),
})

const formRef = ref<any>(null)

const model = ref<any>({})

const conf = ref<any>({})

const toMoney = (value: number) => {
    return parseFloat((value / 100).toFixed(2))
}

const toPercent = (value: number) => {
    return parseFloat((value / 10).toFixed(1))
}

const execReset = () => {
    init.value = false
    Http.post('/ops/biz/merchant/info/conf/detail', {
        id: prop.item.id,
    }).then(resp => {
        if (resp.stat.err > 0) {
            return
        }
        resp.data.id = prop.item.id
        model.value = resp.data
        model.value.contract.court.info = model.value.contract.court.info || '合同签订地'
        model.value.contract.lawsuit.day = model.value.contract.lawsuit.day || 3
        Http.post('/ops/sys/area/conf/detail', { city: resp.data.city }).then(resp => {
            if (resp.stat.err > 0) {
                return
            }
            conf.value = resp.data
            init.value = true
        })
    })
}

const execSave = (e: Event) => {
    e.preventDefault()
    formRef.value.validate((errors: any[]) => {
        if (!errors) {
            Http.post('/ops/biz/merchant/info/conf/save', model.value).then(resp => {
                if (resp.stat.err > 0) {
                    return
                }
                emit('refresh', {})
                notification.success({
                    duration: 1500,
                    title: '操作成功',
                    content: '您已成功保存门店配置',
                })
                setTimeout(() => {
                    emit('update:show', false)
                }, 200)
            })
        } else {
            let msgs = errors.map(err => err[0].message)
            notification.error({
                duration: 1500,
                title: '请填写完整内容',
                description: '当前表单存在以下问题，请处理后提交',
                content: msgs.join('\n'),
            })
        }
    })
}

onBeforeMount(() => {
    execReset()
})
</script>
